<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	
	<!-- 
		显示过滤，排序结果
		有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。
	 -->
	<div id="demo">
		<ul>
			<li v-for="(item, index) in evenNumbers">{{item}}</li>
		</ul>
		
		<ul>
			<li v-for="(item, index) in event(numbers)">{{item}}</li>
		</ul>
		
		<!-- 
			v-for 也可以取整数。在这种情况下，它将重复多次模板。
		 -->
		<span v-for="n in 10">{{n}}</span>
		
		<!-- 
			类似于 v-if，你也可以利用带有 v-for 的 <template> 渲染多个元素
		 -->
		 
		 <!-- 
			Vue官方不推荐：同时使用 v-if 和 v-for
			
			当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。
			当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用
		 -->
		 <span v-for="n in 10" v-if="n > 3 && n < 6 ">{{n}}</span>
	</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
	const vm = new Vue({
		el:'#demo',
		data:{
			numbers: [ 1, 2, 3, 4, 5 ]
		},
		computed:{
			evenNumbers:function() {
				return this.numbers.filter(function(number){
					return number % 2 === 0
				})
			}
		},
		/* 在计算属性不适用的情况下（例如，在嵌套 v-for 循环中）你可以使用一个 method 方法： */
		methods:{
			event:function(numbers) {
				return numbers.filter(function (number) {
					return number % 2 === 0
				})
			}
		}
	});
</script>
</body>
</html>
